<template>
    <div>
        <span style="font-size: 19px;">客户图表</span>
        <el-container style="margin-top: 25px;">
            <template>
                <el-tabs v-model="activeName" @tab-click="handleClick"
                         style="height: 580px; width: 100%;background-color: white; padding-left: 20px;">
                    <el-tab-pane label="客户区域分布" name="first" style="height: 550px; width: 100%;">
                        <el-row>
                            <el-col :span="12">
                                <ve-map style="width: 600px; margin-left: 20px; margin-top: 80px;" :data="chartData" :settings="chartSettings" :events="chartEvents">
                                </ve-map>
                            </el-col>
                            <el-col :span="12">
                                <div style="margin-left: 30px;">
                                    <el-table highlight-current-row border :data="qydata" :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                                              style="width: 550px; height: 500px; overflow-y:scroll; max-height:500px;">
                                        <el-table-column width="300" align="center" property="name" label="区域"></el-table-column>
                                        <el-table-column width="250" align="center" property="value" label="人数"></el-table-column>
                                    </el-table>
                                </div>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="客户自定义分析" name="second" style="height: 500px; width: 100%;">
                        <div style="margin-left: 430px;">
                            <el-select v-model="choice" @change="changeCensus" placeholder="客户行业" value-key="xz">
                                <el-option v-for="item in options" :key="item.xz"
                                        :label="item.label" :value="item.xz">
                                </el-option>
                            </el-select>
                        </div>
                        <div style="height: 500px; width: 1000px;" ref="bingz"></div>
                    </el-tab-pane>
<!--                    <el-tab-pane label="客户新增统计" name="third" style="width: 100%;">-->
<!--                        <el-date-picker v-model="value2" type="datetimerange" :picker-options="pickerOptions"-->
<!--                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">-->
<!--                        </el-date-picker>-->
<!--                        <div style="margin-top: 10px;height:500px;" ref="zhuxzhenx"></div>-->
<!--                    </el-tab-pane>-->
                </el-tabs>
            </template>
        </el-container>
    </div>
</template>
<script>
     import '../../node_modules/echarts/map/js/china.js' // 引入中国地图数据
     export default {
        name: "TfyStatisticalReports",
        data() {
            this.chartSettings = {
                position: 'china',
                selectData: true,
                selectedMode: 'single'
            }
            this.chartEvents = {
                click: (v) => {
                    this.cityName = v.name
                }
            }
            return {
                // pickerOptions: {
                //     shortcuts: [{
                //         text: '最近一周',
                //         onClick(picker) {
                //             const end = new Date();
                //             const start = new Date();
                //             start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                //             picker.$emit('pick', [start, end]);
                //         }
                //     }, {
                //         text: '最近一个月',
                //         onClick(picker) {
                //             const end = new Date();
                //             const start = new Date();
                //             start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                //             picker.$emit('pick', [start, end]);
                //         }
                //     }, {
                //         text: '最近三个月',
                //         onClick(picker) {
                //             const end = new Date();
                //             const start = new Date();
                //             start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                //             picker.$emit('pick', [start, end]);
                //         }
                //     }]
                // },
                value2: '',
                activeName: 'first',
                clientzdy:'',
                options: [{
                    xz: '客户类型',
                    label: '客户类型'
                }, {
                    xz: '客户行业',
                    label: '客户行业'
                }, {
                    xz: '客户来源',
                    label: '客户来源'
                }, {
                    xz: '客户级别',
                    label: '客户级别'
                }],
                xz: '',
                bingz:[],//饼状图
                zhuxzhenx:[],//柱状图
                zhuzlist2:[],//柱状图数据
                zhuzlist:[],//柱状图数据
                cityName: '',
                chartData: {
                    columns: ['name', 'value'],
                    rows: []
                },
                qydata: [],
                choice:'客户类型',
                businessFindMonth:[],//饼状图数据
            };
        },
        methods: {
            /*地图统计*/
            earecounts(){
                this.$axios.post("http://localhost:8088/findditu-list")
                    .then((v)=>{
                        this.chartData.rows = v.data;
                    }).catch(()=>{
                });
            },
            earecountscx(){
                this.$axios.post("http://localhost:8088/findditu-list")
                    .then((v)=>{
                        this.qydata = v.data;
                    }).catch(()=>{
                });
            },
            /*客户饼状图报表 客户行业*/
            findbingz(){
                this.$axios.post("http://localhost:8088/findbingz-list")
                    .then((v)=>{
                        this.businessFindMonth = v.data;
                    }).catch(()=>{
                });
            },
            /*客户饼状图报表 客户来源*/
            findbingzer(){
                this.$axios.post("http://localhost:8088/findbingzer-list")
                    .then((v)=>{
                        this.businessFindMonth = v.data;
                    }).catch(()=>{
                });
            },
            /*客户饼状图报表 客户级别*/
            findbingzsan(){
                this.$axios.post("http://localhost:8088/findbingzsan-list")
                    .then((v)=>{
                        this.businessFindMonth = v.data;
                    }).catch(()=>{
                });
            },
            /*客户饼状图报表 客户类型*/
            findbingzsi(){
                this.$axios.post("http://localhost:8088/findbingzsi-list")
                    .then((v)=>{
                        this.businessFindMonth = v.data;
                    }).catch(()=>{
                });
            },
            /*柱状图*/
            findzhuz(){
                this.$axios.post("http://localhost:8088/findzhuz-list")
                    .then((v)=>{
                        this.zhuzlist = v.data;
                    }).catch(()=>{
                });
            },
            findzhuz2(){
                this.$axios.post("http://localhost:8088/findzhuz-list")
                    .then((v)=>{
                        this.zhuzlist = v.data;
                        this.zhuzlist.forEach((por,i)=>{
                            por = por.name;
                            this.zhuzlist2.splice(i,0,por);
                            window.console.log("柱状图："+this.zhuzlist2)
                        })
                        window.console.log("柱状图2："+this.zhuzlist2)
                    }).catch(()=>{
                });
            },
            //切换饼状图统计
            changeCensus(){
                this.businessFindMonth=[];
                if(this.choice=='客户类型'){
                    //客户级别
                    this.findbingzsi();
                    console.log("1:"+this.businessFindMonth);
                }else if(this.choice=='客户行业'){
                    //客户行业
                    this.findbingz();
                    console.log("2:"+this.businessFindMonth);
                }else if(this.choice=='客户来源'){
                    //客户来源
                    this.findbingzer();
                    console.log("3:"+this.businessFindMonth);
                }else if(this.choice=='客户级别'){
                    //客户级别
                    this.findbingzsan();
                    console.log("4:"+this.businessFindMonth);
                }
            },
            brokenLine() {//饼状图
                let myChart = this.$echarts.init(this.$refs.bingz);
                myChart.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right',
                        data: this.businessFindMonth
                    },
                    series: [{
                        name: 'Platform Breakdown',
                        type: 'pie',
                        radius: '75%',
                        center: ['55%', '50%'],
                        data: this.businessFindMonth,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                })
            },//this.zhuzlist,
            zhuxjt() {//折线图
                window.console.log("折线图")
                let myChart = this.$echarts.init("折线"+this.$refs.zhuxzhenx);
                myChart.setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['FPN-3x', 'FPN-1x', 'C4', 'FPN-3x-with less anchor box', 'FPN-3x-with data augmentation', 'FPN-3x-with multiwarmup']
                    },
                    dataZoom: [
                        {
                            type: 'slider',
                            yAxisIndex: 0,
                            filterMode: 'empty'
                        },
                        {
                            type: 'inside',
                            yAxisIndex: 0,
                            filterMode: 'empty'
                        }
                    ],
                    xAxis:
                        {
                            type: 'category',
                            data: ['AP', 'AP50', 'AP75', 'APs', 'APm', 'APl']
                        },

                    yAxis:
                        {
                            type: 'value',
                        },

                    series: [
                        {
                            name: 'FPN-3x',
                            type: 'line',
                            data: [47.579, 82.514, 48.682, 39.021, 50.524, 50.547]
                        },
                        {
                            name: 'FPN-1x',
                            type: 'line',
                            data: [47.152, 81.592, 48.428, 37.673, 50.366, 48.473]
                        },
                        {
                            name: 'C4',
                            type: 'line',
                            data: [43.701, 77.595, 44.654, 32.112, 47.250, 49.071]
                        },
                        {
                            name: 'FPN-3x-with less anchor box',
                            type: 'line',
                            data: [43.355, 75.927, 46.235, 34.542, 46.575, 37.906]
                        },
                        {
                            name: 'FPN-3x-with data augmentation',
                            type: 'line',
                            data: [45.220, 79.295, 47.398, 34.106, 48.527, 48.507]
                        },
                        {
                            name: 'FPN-3x-with multiwarmup',
                            type: 'line',
                            data: [45.272, 81.489, 46.054, 35.275, 48.326, 47.246]
                        },
                    ]
                })
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
        },
         created(){
             this.earecounts();
             this.findzhuz();
             this.findzhuz2();
             this.changeCensus();
             this.earecountscx();
         },
        mounted () {
           setTimeout(()=>{this.brokenLine()},500) ;
           //setTimeout(()=>{this.zhuxjt()},500) ;
            this.zhuxjt();//柱状图
        },
        updated(){
            this.brokenLine();//饼状图
           /* this.zhuxjt();//柱状图*/
        },
        watch:{
            businessFindMonth(val){
                this.brokenLine();
                window.console.log(val)
            },
            // zhuzlist(val){
            //     this.zhuxjt();
            //     window.console.log(val)
            // },
            // zhuzlist2(val){
            //     this.zhuxjt();
            //     window.console.log(val)
            // },
        },
    }
</script>

<style scoped>

</style>